<template>
  <div>
    <van-nav-bar
      style="color: #fff"
      title="注册/登录"
      left-text=""
      left-arrow
      @click-left="$router.back()"
    />

    <van-form validate-first @failed="onFailed">
      <!-- 通过 pattern 进行正则校验 -->

      <van-field
        left-icon="user-o"
        v-model="loginname.username"
        name="pattern"
        placeholder="请输入手机号"
        :rules="[{ pattern, message: '请输入正确内容' }]"
      />
      <van-field
        left-icon="eye-o"
        v-model="loginname.password"
        name="pattero"
        placeholder="请输入密码"
        :rules="[{ pattero, message: '请输入正确内容' }]"
        ><template #button> </template
      ></van-field>
      <van-button
        round
        block
        type="info"
        native-type="submit"
        @click="verification"
        >登录</van-button
      >
    </van-form>
    <router-link to="/reg" class="link">还没账号? 立即注册</router-link>
    <br />
    <router-link to="/retrievepassword" class="retrievepassword"
      >找回密码</router-link
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
      pattero: /^\d+$/,
      loginname: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    onClickLeft() {},
    onFailed() {},
    async verification() {
      const { data: res } = await this.$axios({
        method: "POST",
        url: "/user/login",
        params: this.loginname,
      });
      if (res.code == 0) {
        window.localStorage.setItem("uid", res.uid);
        window.localStorage.setItem("token", res.token);

        this.$toast("登录成功");
        setTimeout((v) => {
          this.$router.push("/");
        }, 500);
      }
      this.$toast(res.msg);
      console.log(res);
      console.log(res.uid);
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar__content {
  border: none;
}
.retrievepassword {
  margin-right: 5px;
}
.van-form {
  .van-field {
    .van-button {
      border-radius: 20px;
      background-color: #ededed;
      color: #000;
    }
  }
}
.van-nav-bar {
  background-color: #07c160;
}
.van-nav-bar {
  color: #fff;
}
.van-button {
  border: none;
  background-color: #07c160;
}
</style>